import { useState, useEffect } from 'react'
import './index.css'
import a from '../../assets/img/a.png'
import a1 from '../../assets/img/a1.png'
import a2 from '../../assets/img/a2.png'
import a3 from '../../assets/img/a3.png'
import a4 from '../../assets/img/a4.png'
import a5 from '../../assets/img/a5.png'
// import b from '../../assets/img/b.png'
import b1 from '../../assets/img/b1.png'
import b2 from '../../assets/img/b2.png'
import c from '../../assets/img/c.png'
import c1 from '../../assets/img/c1.png'
import c2 from '../../assets/img/c2.png'
import c3 from '../../assets/img/c3.png'
import c4 from '../../assets/img/c4.png'
import c5 from '../../assets/img/c5.png'
import c6 from '../../assets/img/c6.png'
import Tool from '../../components/tool'
import Navigation from '../../components/navigation'
import Hotspot from '../../components/hotspot'
// import HeaderNav from '../../components/HeaderNav';
import BannerCarousel from '../../components/BannerCarousel';
import BannerSearchBox from '../../components/BannerSearchBox';
import CommonTools from '../../components/CommonTools';
import MarketingHotspot from '../../components/MarketingHotspot';
import CustomerService from '../../components/CustomerService';
import Actualshooting from '../../components/Actualshooting'
import Backgroundmusic from '../../components/Backgroundmusic'
// import Tool from '../../components/tool'
import Portrait from '../../components/Portrait'
import Thirteen from '../../components/Thirteen'
import Fourteen from '../../components/fourteen'
import Fifteen from '../../components/fifteen'
function Index() {
  const [showBlock, setShowBlock] = useState(false);
  const [showBlock1, setShowBlock1] = useState(false);
  const [showBlock2, setShowBlock2] = useState(false);
  const [showBlock5, setShowBlock5] = useState(false);
  const [showFhdb, setShowFhdb] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const windowHeight = window.innerHeight;
      const documentHeight = document.documentElement.scrollHeight;

      // 当滚动到顶部时隐藏，滚动到底部时显示
      if (scrollTop === 0) {
        setShowFhdb(false);
      } else if (scrollTop + windowHeight >= documentHeight - 100) {
        setShowFhdb(true);
      } else {
        setShowFhdb(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className='one'>
      <div className='cbgn'>
        <Tool></Tool>
        <div className='cbgn1'
          onMouseEnter={() => setShowBlock(true)}
          onMouseLeave={() => setShowBlock(false)}
        >
          <img src={a} alt="" style={{ marginLeft: '24px' }} />
          <div>
            {showBlock && (
              <div className='fhdb' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
                <img src={a5} alt="" style={{ marginLeft: '25px', marginTop: '20px' }} />
              </div>
            )}
          </div>
        </div>
        <div className='cbgn2'
          onMouseEnter={() => setShowBlock1(true)}
          onMouseLeave={() => setShowBlock1(false)}
        >
          <img src={a1} alt="" style={{ marginLeft: '13px' }} />
          {showBlock1 && (
            <div style={{ position: 'absolute', right: '90px', top: '110px', width: '200px', height: '100px', background: 'white', zIndex: 10 }} className='popup-b1'>
              <img src={b1} alt="" style={{ marginLeft: '-150px', marginTop: '-90px' }} />
            </div>
          )}
        </div>
        <div className='cbgn3'
          onMouseEnter={() => setShowBlock2(true)}
          onMouseLeave={() => setShowBlock2(false)}
        >
          <img src={a2} alt="" style={{ marginLeft: '24px', marginTop: '5px' }} />
          {showBlock2 && (
            <div style={{ position: 'absolute', right: '90px', top: '110px', width: '200px', height: '100px', zIndex: 10 }} className='popup-b2'>
              <img src={b2} alt="" style={{ marginLeft: '-160px', marginTop: '30px' }} />
            </div>
          )}
        </div>
        <div className='cbgn4'>
          <img src={a3} alt="" style={{ marginLeft: '24px' }} />
        </div>
        <div className='cbgn5'
          onMouseEnter={() => setShowBlock5(true)}
          onMouseLeave={() => setShowBlock5(false)}
        >
          <img src={a4} alt="" style={{ marginLeft: '18px' }} />
          {showBlock5 && (
            <div style={{ position: 'absolute', right: '90px', top: '100px', width: '322px', height: '344px', background: '#fff', border: '1px solid #ccc', zIndex: 10 }} className='popup-jj'>
              <div className='cbgn51'>
                <div>
                  <img src={c} alt="" style={{ width: '25px', height: '25px', marginLeft: '30px', float: 'left' }} />
                  <h3 style={{ marginLeft: '8px', float: 'left', marginTop: '-1px' }}>企业客服</h3>
                  <p style={{ marginLeft: '-75px', float: 'left', marginTop: '30px' }}>工作时间:9:30-18:30</p>
                  <div style={{ width: "322px", height: '30px', position: 'absolute', marginTop: '60px' }}>
                    <img src={c1} alt="" style={{ float: 'left', marginLeft: '65px', width: '80px', height: '29px' }} />
                    <img src={c2} alt="" style={{ float: 'left', marginLeft: '2px', width: '80px', height: '29px' }} />
                  </div>
                </div>
              </div>
              <div className='cbgn51'>
                <div>
                  <img src={c} alt="" style={{ width: '25px', height: '25px', marginLeft: '30px', float: 'left' }} />
                  <h3 style={{ marginLeft: '8px', float: 'left', marginTop: '-1px' }}>个人客服</h3>
                  <p style={{ marginLeft: '-75px', float: 'left', marginTop: '30px' }}>工作时间:9:30-18:30</p>
                  <div style={{ width: "322px", height: '30px', position: 'absolute', marginTop: '60px' }}>
                    <img src={c3} alt="" style={{ float: 'left', marginLeft: '65px', width: '80px', height: '29px' }} />

                  </div>
                </div>
              </div>
              <div className='cbgn52'>
                <img src={c4} alt="" style={{ position: 'absolute', marginLeft: '15px' }} />
                <p style={{ float: 'left', color: '#ccc', marginLeft: '35px', marginTop: '-2px' }}>
                  常见问题</p>
                <img src={c5} alt="" style={{ position: 'absolute', marginLeft: '12px', marginTop: '2px' }} />
                <p style={{ float: 'left', color: '#ccc', marginLeft: '30px', marginTop: '-2px' }}>
                  意见反馈</p>
                <img src={c6} alt="" style={{ position: 'absolute', marginLeft: '13px' }} />
                <p style={{ float: 'left', color: '#ccc', marginLeft: '30px', marginTop: '-2px' }}>
                  网站声明</p>
              </div>
            </div>
          )}
        </div>
      </div>
      <div>
        {showFhdb && (
          <div className='fhdb' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
            <img src={a5} alt="" style={{ marginLeft: '25px', marginTop: '20px' }} />
          </div>
        )}
      </div>
      <Navigation></Navigation>
      <div className='two'>
        <div style={{ padding: '20px', textAlign: 'center' }}>
          {/* <HeaderNav /> */}
          <div style={{ margin: '30px 0' }}>
            <BannerCarousel />
            <BannerSearchBox />
            <h2 style={{ textAlign: 'left', margin: '32px 0 12px 8px', fontWeight: 700 }}>常用工具</h2>
            <CommonTools />
            <h2 style={{ textAlign: 'left', margin: '32px 0 12px 8px', fontWeight: 700 }}>营销热点</h2>
            <MarketingHotspot />
          </div>
        </div>
      </div>
      <div className='three'>

      </div>
      <div className='four'>

      </div>
      <div className='five'>

      </div>
      <div className='six'>
        <Hotspot></Hotspot>
      </div>
      <div className='seven'>

      </div>
      <div className='eight'>
        <Actualshooting></Actualshooting>
      </div>
      <div className='nine'>

      </div>
      <div className='ten'>
        <Backgroundmusic></Backgroundmusic>
      </div>
      <div className='eleven'>
        <Portrait></Portrait>
      </div>
      <div className='twelve'>

      </div>
      <div className='thirteen'>
        <Thirteen></Thirteen>
      </div>
      <div className='fourteen'>
        <Fourteen></Fourteen>
      </div>
      <div className='fifteen'>
        <Fifteen></Fifteen>
          </div>
      <CustomerService />
    </div>
  )
}

export default Index
